<!DOCTYPE html>
<html lang="en">
<head>
    <title>Home</title>
    <!-- for-mobile-apps -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content=""/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!-- //for-mobile-apps -->
    {css href="/static/front/css/bootstrap.css" /}
    {css href="/static/front/css/font-awesome.css" /}
    {css href="/static/front/css/style.css" rel="stylesheet" /}
    <!-- js -->
    {js href="/static/front/js/jquery-2.1.4.min.js" /}
    <!-- //js -->
    <link href='http://fonts.googleapis.com/css?family=Oleo+Script:400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
    <link href="http://fonts.googleapis.com/css?family=Oswald:300,400,700" rel="stylesheet">


    <!-- start-smooth-scrolling -->
    {js href="/static/front/js/move-top.js" /}
    {js href="/static/front/js/easing.js" /}
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $(".scroll").click(function (event) {
                event.preventDefault();
                $('html,body').animate({scrollTop: $(this.hash).offset().top}, 1000);
            });
        });
    </script>
    <!-- start-smooth-scrolling -->
</head>

<body>
<!-- banner -->
<div class="banner-figures">
    <div class="banner">
        <div class="container banner-drop">
            <div class="header">
                <div class="header-left logo">
                    <h1><a href="index.html">Elegant Resume</a></h1>
                </div>
                <div class="header-right">
                    <nav>
                        <ul>
                            <li class="active">
                                <a href="index.html" class="active"><span>Home</span></a>
                            </li>
                            <li>
                                <a href="#about" class="scroll"><span>About</span></a>
                            </li>
                            <li>
                                <a href="#experience" class="scroll"><span>Experience</span></a>
                            </li>
                            <li>
                                <a href="#projects" class="scroll"><span>Projects</span></a>
                            </li>
                            <li>
                                <a href="#contact" class="scroll"><span>Contact</span></a>
                            </li>
                        </ul>
                    </nav>
                    <div class="menu-icon animated wow zoomIn" data-wow-duration="1000ms" data-wow-delay="800ms">
                        <span></span></div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="name">
                <h2>John Williams</h2>
                <p> Web Designer & Developer</p>
            </div>
            <div class="social-icons animated wow bounceInDown" data-wow-duration="1000ms" data-wow-delay="800ms">
                <ul class="top-links">
                    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                    <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                    <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                </ul>
            </div>
        </div>
        <div class="banner-btm-grid-w3ls">
            <div class="banner-left-wthree">
                <img src="/static/front/images/banner-btm.jpg" alt=" " class="img-responsive">
                <ul class="address">

                    <li>
                        <ul class="address-text">
                            <li><b>NAME</b></li>
                            <li>: I'M John Williams</li>
                        </ul>
                    </li>
                    <li>
                        <ul class="address-text">
                            <li><b>D.O.B</b></li>
                            <li>: 23-06-1980</li>
                        </ul>
                    </li>
                    <li>
                        <ul class="address-text">
                            <li><b>ADDRESS </b></li>
                            <li>: 345 Setwant natrer,Washington,US.</li>
                        </ul>
                    </li>
                    <li>
                        <ul class="address-text">
                            <li><b>E-MAIL </b></li>
                            <li><a href="mailto:example@mail.com">: mail@example.com</a></li>
                        </ul>
                    </li>

                </ul>
            </div>
            <div class="banner-right-w3-agileits">
                <iframe src=""></iframe>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <script>
        (function ($) {
            $(".menu-icon").on("click", function () {
                $(this).toggleClass("open");
                $(".container").toggleClass("nav-open");
                $("nav ul li").toggleClass("animate");
            });

        })(jQuery);
    </script>

</div>

<!-- //banner -->
<!-- about -->
<div class="about" id="about">
    <div class="container">
        <span class="about-top-w3">Who I am?</span>
        <h4 class="title-w3ls">About Me</h4>
        <h5 class="sub">The brief introduction of myself</h5>
        <p class="para-w3-agile">Ut in ligula sollicitudin, auctor elit vel, mollis tortor. Nullam id magna in eros
            mollis porttitor vel et eros.Phasellus sed iaculis nibh, non suscipit tortor. Aenean ante massa, lobortis et
            dolor eget, sollicitudin luctus arcu. Donec eros tortor, ultrices in lectus quis, aliquet commodo
            lectus. </p>
        <p class="para-w3-agile">Phasellus facilisis, est et tempus aliquet, odio purus pretium felis, sit amet
            imperdiet tortor ex vel purus.Nulla mattis venenatis rutrum. Nunc molestie elit tellus, id iaculis lectus
            feugiat id. </p>
        <div class="skills-bar">
            <h4 class="title-w3ls">My Skills</h4>
            <section class='bar'>
                <section class='wrap'>
                    <div class='wrap_right'>
                        <div class='bar_group'>
                            <div class='bar_group__bar thin' label='jQuery' show_values='true' tooltip='true' value='343'></div>
                            <div class='bar_group__bar thin' label='AJAX' show_values='true' tooltip='true' value='235'></div>
                            <div class='bar_group__bar thin' label='PHP' show_values='true' tooltip='true' value='675'></div>
                            <div class='bar_group__bar thin' label='CSS' show_values='true' tooltip='true' value='456'></div>
                            <div class='bar_group__bar thin' label='HTML' show_values='true' tooltip='true' value='245'></div>
                            <div class='bar_group__bar thin' label='Python' show_values='true' tooltip='true' value='375'></div>
                        </div>
                    </div>
                    <div class='clear'></div>
                </section>
            </section>
        </div>
    </div>
</div>
<!-- //about -->
<!--work-experience-->
<div id="experience" class="experience">
    <div class="container">
        <span class="about-top-w3">Versatile Web Designer</span>
        <h4 class="title-w3ls">Work Experience</h4>
        <div class="work-info">
            <div class="col-md-6 work-right work-right2">
                <h4>2009 - 2012 </h4>
            </div>
            <div class="col-md-6 work-left work-left2">
                <h5> Ui Design & Developer <span class="glyphicon glyphicon-briefcase"> </span></h5>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
                    totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
                    dicta sunt explicabo </p>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="work-info">
            <div class="col-md-6 work-left">
                <h4>2012 - 2014 </h4>
            </div>
            <div class="col-md-6 work-right">
                <h5><span class="glyphicon glyphicon-briefcase"> </span> Web Developer</h5>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
                    totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
                    dicta sunt explicabo </p>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="work-info">
            <div class="col-md-6 work-right work-right2">
                <h4>2014 - </h4>
            </div>
            <div class="col-md-6 work-left work-left2">
                <h5> Phper <span class="glyphicon glyphicon-briefcase"></span></h5>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
                    totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
                    dicta sunt explicabo </p>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="work-info">
            <div class="col-md-6 work-left work-left2">
                <h4>2018 - </h4>
            </div>
            <div class="col-md-6 work-right work-right2">
                <h5><span class="glyphicon glyphicon-briefcase"></span> Python </h5>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
                    totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
                    dicta sunt explicabo </p>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

<!-- projects -->
<div class="projects" id="projects">
    <div class="container">
        <span class="about-top-w3">The best of my projects </span>
        <h4 class="title-w3ls">Featured Projects</h4>
        <div class="news-bottom">
            <div class="news-one-wthree-agile">
                <div class="col-md-6 news-left">
                    <div class="biseller-column">
                        <a class="lightbox" href="#one">
                            <img src="/static/front/images/p1.jpg" alt=""/>
                        </a>
                        <div class="lightbox-target" id="one">
                            <img src="/static/front/images/p1.jpg" alt=""/>
                            <p class="pop">Duis bibendum pellentesque nisi eget volutpat. Nunc rhoncus ultrices
                                lectus.Aliquam eu dui quis orci ultrices eleifend ut non massa.non suscipit leo
                                fringilla non suscipit leo fringilla molestie</p>
                            <a class="lightbox-close" href="#"> </a>

                            <div class="clearfix"></div>

                        </div>
                    </div>

                </div>
                <div class="col-md-6 news-right">
                    <a href="#one"><h4>Creative Design</h4></a>
                    <p class="para-w3-agile">Duis bibendum pellentesque nisi eget volutpat. Nunc rhoncus ultrices
                        lectus.Aliquam eu dui quis orci ultrices eleifend ut non massa. Duis commodo, ante in vulputate
                        iaculis, libero ex fringilla dolor id laoreet augue. Maecenas dui diam, pellentesque et.</p>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="news-one-wthree-agile">
                <div class="col-md-6 news-right">
                    <a href="#three"><h4>Creative Design</h4></a>
                    <p class="para-w3-agile">Duis bibendum pellentesque nisi eget volutpat. Nunc rhoncus ultrices
                        lectus.Aliquam eu dui quis orci ultrices eleifend ut non massa. Duis commodo, ante in vulputate
                        iaculis, libero ex fringilla dolor id laoreet augue. Maecenas dui diam, pellentesque et.</p>
                </div>
                <div class="col-md-6 news-left">
                    <div class="biseller-column">
                        <a class="lightbox" href="#three">
                            <img src="/static/front/images/p2.jpg" alt=""/>
                        </a>
                        <div class="lightbox-target" id="three">
                            <img src="/static/front/images/p2.jpg" alt=""/>
                            <p class="pop">Duis bibendum pellentesque nisi eget volutpat. Nunc rhoncus ultrices
                                lectus.Aliquam eu dui quis orci ultrices eleifend ut non massa.non suscipit leo
                                fringilla non suscipit leo fringilla molestie</p>
                            <a class="lightbox-close" href="#"> </a>

                            <div class="clearfix"></div>
                        </div>
                    </div>

                </div>
                <div class="clearfix"></div>
            </div>
            <div class="news-one-wthree-agile">
                <div class="col-md-6 news-left">
                    <div class="biseller-column">
                        <a class="lightbox" href="#two">
                            <img src="/static/front/images/p3.jpg" alt=""/>
                        </a>
                        <div class="lightbox-target" id="two">
                            <img src="/static/front/images/p3.jpg" alt=""/>
                            <p class="pop">Duis bibendum pellentesque nisi eget volutpat. Nunc rhoncus ultrices
                                lectus.Aliquam eu dui quis orci ultrices eleifend ut non massa.non suscipit leo
                                fringilla non suscipit leo fringilla molestie</p>
                            <a class="lightbox-close" href="#"> </a>

                            <div class="clearfix"></div>
                        </div>
                    </div>

                </div>
                <div class="col-md-6 news-right">
                    <a href="#two"><h4>Awesome Design</h4></a>
                    <p class="para-w3-agile">Duis bibendum pellentesque nisi eget volutpat. Nunc rhoncus ultrices
                        lectus.Aliquam eu dui quis orci ultrices eleifend ut non massa. Duis commodo, ante in vulputate
                        iaculis, libero ex fringilla dolor id laoreet augue. Maecenas dui diam, pellentesque et.</p>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="news-one-wthree-agile">
                <div class="col-md-6 news-right">
                    <a href="#four"><h4>Awesome Design</h4></a>
                    <p class="para-w3-agile">Duis bibendum pellentesque nisi eget volutpat. Nunc rhoncus ultrices
                        lectus.Aliquam eu dui quis orci ultrices eleifend ut non massa. Duis commodo, ante in vulputate
                        iaculis, libero ex fringilla dolor id laoreet augue. Maecenas dui diam, pellentesque et.</p>
                </div>
                <div class="col-md-6 news-left">
                    <div class="biseller-column">
                        <a class="lightbox" href="#four">
                            <img src="/static/front/images/p4.jpg" alt=""/>
                        </a>
                        <div class="lightbox-target" id="four">
                            <img src="/static/front/images/p4.jpg" alt=""/>
                            <p class="pop">Duis bibendum pellentesque nisi eget volutpat. Nunc rhoncus ultrices
                                lectus.Aliquam eu dui quis orci ultrices eleifend ut non massa.non suscipit leo
                                fringilla non suscipit leo fringilla molestie</p>
                            <a class="lightbox-close" href="#"> </a>

                            <div class="clearfix"></div>
                        </div>
                    </div>

                </div>
                <div class="clearfix"></div>
            </div>
            <div class="news-one-wthree-agile">
                <div class="col-md-6 news-left">
                    <div class="biseller-column">
                        <a class="lightbox" href="#five">
                            <img src="/static/front/images/p5.jpg" alt=""/>
                        </a>
                        <div class="lightbox-target" id="five">
                            <img src="/static/front/images/p5.jpg" alt=""/>
                            <p class="pop">Duis bibendum pellentesque nisi eget volutpat. Nunc rhoncus ultrices
                                lectus.Aliquam eu dui quis orci ultrices eleifend ut non massa.non suscipit leo
                                fringilla non suscipit leo fringilla molestie</p>
                            <a class="lightbox-close" href="#"> </a>

                            <div class="clearfix"></div>
                        </div>
                    </div>

                </div>
                <div class="col-md-6 news-right">
                    <a href="#five"><h4>Simple Design</h4></a>
                    <p class="para-w3-agile">Duis bibendum pellentesque nisi eget volutpat. Nunc rhoncus ultrices
                        lectus.Aliquam eu dui quis orci ultrices eleifend ut non massa. Duis commodo, ante in vulputate
                        iaculis, libero ex fringilla dolor id laoreet augue. Maecenas dui diam, pellentesque et.</p>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<!-- //projects -->
<!-- contact -->
<div class="contact" id="contact">
    <div class="container">
        <span class="about-top-w3">Send me a message</span>
        <h4 class="title-w3ls">Contact Me</h4>
        <div class="col-md-5 contact-agileits-w3layouts">
            <form action="#" method="post">
                <input type="text" name="Your Name" placeholder="Name" required=""/>
                <input type="email" name="Your Email" placeholder="Email" required=""/>
                <input type="text" Name="Phone Number" placeholder="Number" required=""/>
                <textarea name="Message" placeholder="Message" required></textarea>
                <input type="submit" value="Submit">
            </form>
            <h5 class="sub">Looking for Address</h5>
            <p><span>Location</span> : 345 Setwant natrer,Washington,US.</p>
            <p><span>Phone</span> : +33 892 35 35 35</p>
            <p><span>Email</span><a href="mailto:example@mail.com"> : mail@example.com</a></p>
        </div>
    </div>
</div>
<!-- //about -->

{js href="/static/front/js/bars.js" /}

<!-- here stars scrolling icon -->
<script type="text/javascript">
    $(document).ready(function () {
        /*
            var defaults = {
            containerID: 'toTop', // fading element id
            containerHoverID: 'toTopHover', // fading element hover id
            scrollSpeed: 1200,
            easingType: 'linear'
            };
        */

        $().UItoTop({easingType: 'easeOutQuart'});

    });
</script>
<!-- //here ends scrolling icon -->
</body>
</html>